<template>
  <a-modal
    :visible="visible"
    :title="`调课详情 - ${record.id || ''}`"
    width="800px"
    :footer="null"
    @cancel="$emit('close')"
  >
    <a-tabs defaultActiveKey="1">
      <a-tab-pane tab="基本信息" key="1">
        <a-descriptions bordered :column="1">
          <a-descriptions-item label="申请人">{{ record.teacher || '--' }}</a-descriptions-item>
          <a-descriptions-item label="课程名称">{{ record.courseName || '--' }}</a-descriptions-item>
          <a-descriptions-item label="原上课时间">{{ record.originalTime || '--' }}</a-descriptions-item>
          <a-descriptions-item label="原上课地点">{{ record.originalRoom || '--' }}</a-descriptions-item>
          <a-descriptions-item label="调整后时间">{{ record.adjustedTime || '--' }}</a-descriptions-item>
          <a-descriptions-item label="调整后地点">{{ record.adjustedRoom || '--' }}</a-descriptions-item>
          <a-descriptions-item label="涉及班级">
            <a-tag v-for="cls in record.classes" :key="cls">{{ cls }}</a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="调课原因">{{ record.reason || '--' }}</a-descriptions-item>
          <a-descriptions-item label="详细说明">{{ record.description || '--' }}</a-descriptions-item>
          <a-descriptions-item label="附件" v-if="record.attachment">
            <a :href="record.attachment.url" target="_blank">{{ record.attachment.name }}</a>
          </a-descriptions-item>
        </a-descriptions>
      </a-tab-pane>

      <a-tab-pane tab="审批流程" key="2" v-if="record.approvalProcess">
        <a-timeline>
          <a-timeline-item v-for="step in record.approvalProcess" :key="step.time">
            <p>{{ step.action }} - {{ step.operator }}</p>
            <p>{{ step.time }}</p>
            <p v-if="step.comment">意见: {{ step.comment }}</p>
          </a-timeline-item>
        </a-timeline>
      </a-tab-pane>

      <a-tab-pane tab="冲突检测" key="3" v-if="record.conflictCheck">
        <a-alert
          v-if="record.conflictCheck.hasConflict"
          message="存在冲突"
          type="warning"
          showIcon
          style="margin-bottom: 20px"
        >
          <div slot="description">
            <p>冲突人数: {{ record.conflictCheck.conflictStudents }}人</p>
            <p>冲突课程: {{ record.conflictCheck.conflictCourses.join(', ') }}</p>
          </div>
        </a-alert>
        <a-alert
          v-else
          message="无冲突"
          type="success"
          showIcon
          style="margin-bottom: 20px"
        />
        <div v-if="record.conflictCheck.conflictDetails">
          <h4>冲突详情:</h4>
          <a-table
            :columns="conflictColumns"
            :dataSource="record.conflictCheck.conflictDetails"
            rowKey="id"
            size="small"
          />
        </div>
      </a-tab-pane>
    </a-tabs>

    <div class="modal-footer" v-if="showActions">
      <a-button type="primary" @click="handleApprove" v-if="canApprove">通过</a-button>
      <a-button @click="handleReject" v-if="canApprove">拒绝</a-button>
      <a-button @click="handlePrint">打印通知单</a-button>
      <a-button @click="$emit('close')">关闭</a-button>
    </div>
  </a-modal>
</template>

<script>
const conflictColumns = [
  {
    title: '学号',
    dataIndex: 'studentId'
  },
  {
    title: '姓名',
    dataIndex: 'studentName'
  },
  {
    title: '冲突课程',
    dataIndex: 'conflictCourse'
  },
  {
    title: '冲突时间',
    dataIndex: 'conflictTime'
  }
]

export default {
  props: {
    visible: Boolean,
    record: {
      type: Object,
      default: () => ({})
    },
    showActions: {
      type: Boolean,
      default: false
    },
    canApprove: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      conflictColumns
    }
  },
  methods: {
    handleApprove() {
      this.$confirm({
        title: '确认通过申请?',
        content: '确定要通过这条调课申请吗?',
        onOk: () => {
          this.$emit('approve', this.record)
          this.$emit('close')
        }
      })
    },
    handleReject() {
      this.$confirm({
        title: '确认拒绝申请?',
        content: '确定要拒绝这条调课申请吗?',
        onOk: () => {
          this.$emit('reject', this.record)
          this.$emit('close')
        }
      })
    },
    handlePrint() {
      this.$emit('print', this.record)
    }
  }
}
</script>

<style scoped>
.modal-footer {
  margin-top: 20px;
  text-align: right;
}

.modal-footer button {
  margin-left: 10px;
}
</style>